<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=2.0 user-scalable=yes"/>
    <title>我的主页</title>
    <link rel="stylesheet" type="text/css" href="datatables/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="datatables/css/select.dataTables.css">

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #page {
            padding: 20px 10px;
        }

        #table-btn-group a {
            display: inline-block;
            width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid gray;
        }

    </style>

</head>
<body>
<div id="page">


    <div>
        <form id="frm-search">
            <label>请输入跳转页数：</label>
            <input type="number" name="pageNum" value="1" style="width: 100px;height: 30px;line-height: 30px;">
            <input id="btn-search" type="button" value="提交" style="width: 50px;height: 30px;line-height: 30px;">
        </form>
    </div>

    <br>

    <div class="table-responsive" style="width: 98%;margin: 0 auto;">
        <table id="example" class="display" cellspacing="0" width="100%">
        </table>
    </div>


</div>
</body>
<script type="text/javascript" src="datatables/js/jquery.js"></script>
<script type="text/javascript" src="datatables/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="datatables/js/dataTables.select.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="customer/js/my.datatables.server.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        var tools = '<div id="table-btn-group" class="btn-group">\
            <a href="add.html" onclick="">&nbsp;新增</a>\
            <a class="oper-delete">&nbsp;删除</a>\
        </div>';


        var grid = $('#example').DGrid({
            gridName: 'example', // 给 grid起个名
            removeUrl: 'xxxx/remove', // 配置删除路径
            tools: tools, // 操作按钮组
            // dataTable(options)，使用以下定义覆盖 options中的值
            gridOptions: {
                ajax: {
                    url: 'datatables' // 分页url
                },
                // 列配置
                columns: [
                    {data: 'id', title: 'id'},
                    {data: 'name', title: 'name', orderable: false},
                    {data: 'age', title: 'age', orderable: false}
                ]
            },
            fnServerParams: function (aoData) {
                aoData.pageNum = $('input[name="pageNum"]').val();
            }
        });


        $('#btn-search').click(function () {
            var pageNum = $('input[name="pageNum"]').val();
            if (pageNum) {
                grid.gotoPageNum(pageNum);
                $('input[name="pageNum"]').val('');
            }
        });
    });

</script>
</html>